import React, { PureComponent, Fragment, CSSProperties } from "react";
import { Picker, Button, Flex, InputItem, Modal } from "antd-mobile";
import MToast from "../../Util/MToast"
import { isNull, combineDefaultStr, handleInputFocusBlur } from "../../../utils/helper"
import { MIcon } from "../../MIcon"
interface Props {
	value?: any,
	onChange?: Function,
	min?: number | string,
	max?: number | string,
	step?: number | string,
	label?: string,
	required?: any,
	disabled?: any,
	readonly?: any,
	show_label?: any,
	tips?: any,
	label_width?: any,
	hasError?: boolean,
	errorMsg?: any,
	label_text_color?: string,
	label_text_align?: string,
	suffix_label?: any,
	componentStyle?: CSSProperties,
	label_left?: any,
	decimal?: any,
	hidden_arrow?: any
}
interface State {
	value: any,
	inputValue: any,
	open: boolean
}
export default class MyInputNumberModal extends PureComponent<Props, State> {
	public readonly state: Readonly<State> = {
		value: this.props.value,
		inputValue: "",
		open: false
	}
	componentWillReceiveProps(nextProps: Props) {
		// Should be a controlled component.
		if ('value' in nextProps) {
			let value = nextProps.value;
			this.setState({
				value
			});
		}
	}
	changeInputValue(inputValue) {
		this.setState({
			inputValue: inputValue
		})
	}
	changeValue = (value) => {
		let { value: oldValue } = this.state;
		if (value === oldValue) {
			return;
		}
		if (!('value' in this.props)) {
			this.setState({
				value: value
			});
		}
		this.triggerChange(value);
	};

	triggerChange = (changedValue) => {
		const onChange = this.props.onChange;
		if (onChange) {
			onChange(changedValue);
		}
	};
	onChange = (val) => {
		let value = val;
		const reg1 = /^[0-9]{1,}.{0,1}([0-9]*)?$/;
		const reg = /^-(([0-9]{0,})|([0-9]{1,}.{0,1}))([0-9]*)?$/;//匹配 - 号开头的数
		if ((reg.test(value)) || (reg1.test(value)) || value === '') {
			if (value.toString().indexOf(".") == value.length - 1) {
			}
			else if (value.toString().indexOf("-") == 0) {
				if (!isNaN(parseFloat(value))) {
					if (parseFloat(value) == 0) {

					}
					else {
						value = parseFloat(value)
					}
				}
			}
			else if (isNaN(value)) {
				value = parseFloat(value)
			}
			else {
				value = Number(value)
			}
			this.changeInputValue(value)
		}
	};
	onBlur = (val) => {
		handleInputFocusBlur(true);
		if (!isNull(val)) {
			if (val.toString().indexOf(".") == val.length - 1) {
				val = Number(val.substring(0, val.length - 1))
			}
			else if (val === "-") {
				val = undefined
			}
			else if (val.toString().indexOf("-") == 0) {
				if (!isNaN(parseFloat(val))) {
					if (parseFloat(val) == 0) {
						val = 0
					}
					else {
						val = parseFloat(val)
					}
				}
			}
			else {
				if (isNaN(Number(val))) {
					val = undefined
				}
				else {
					val = Number(val)
				}
			}
			let { max, min ,decimal} = this.props;
			if (!isNull(max)) {
				if (val >= max) {
					val = max
				}
			}
			if (!isNull(min)) {
				if (val <= min) {
					val = min
				}
			}
			if (isNull(decimal)) {
				decimal = 1
			}
			val=Number(val).toFixed(decimal);
			this.changeInputValue(val)
		}
	};
	sub = () => {
		let { min, step, decimal } = this.props;
		if (isNull(step)) {
			step = 1
		}
		let { inputValue } = this.state;
		if (isNull(inputValue)) {
			inputValue = 0
		}
		inputValue = inputValue * 1 - Number(step);
		if (!isNull(min)) {
			if (inputValue < min) {
				inputValue = min;
			}
		}
		if (isNull(decimal)) {
			decimal = 1
		}
		inputValue = Number(inputValue).toFixed(decimal);
		this.onChange(inputValue);
	}
	add = () => {
		let { max, step, decimal } = this.props;
		if (isNull(step)) {
			step = 1
		}
		let { inputValue } = this.state;
		if (isNull(inputValue)) {
			inputValue = 0
		}
		inputValue = inputValue * 1 + Number(step);
		if (!isNull(max)) {
			if (inputValue > max) {
				inputValue = max;
			}
		}
		if (isNull(decimal)) {
			decimal = 1
		}
		inputValue = Number(inputValue).toFixed(decimal);
		this.onChange(inputValue);
	}
	render() {
		let { label, required, disabled, readonly, show_label, tips, label_width = 5, hasError, errorMsg, label_text_color, label_text_align = "left", suffix_label, componentStyle, label_left, decimal, hidden_arrow } = this.props;
		if (isNull(decimal)) {
			decimal = 1
		}
		let isDisabled = disabled == 1;
		let isReadonly = readonly == 1;
		let isShowLabel = isNull(show_label) || show_label == 1;
		let isRequired = required == 1;
		let { value, inputValue } = this.state;
		let requiredClass = "am-list-item am-input-item am-list-item-middle mi-text mi-radio-group";
		if (isRequired) {
			requiredClass += " required"
		}
		if (hasError) {
			requiredClass += " am-input-error"
		}
		if (!isNull(label_text_align)) {
			requiredClass += " label-text-align-" + label_text_align
		}
		let onExtraClick = () => {
			MToast.info(tips, 2, null, false)
		};
		let labelClass = "am-input-label am-input-label-";
		if (isNull(label_width)) {
			labelClass += "3"
		}
		else {
			labelClass += label_width
		}
		let modalShowValue: any = "";
		let showValue = ""
		if (!isNull(inputValue)) {
			// modalShowValue = Number(inputValue).toFixed(decimal);
			modalShowValue = inputValue;
		}
		if (!isNull(value)) {
			showValue = Number(value).toFixed(decimal);
		}
		return (
			<div>
				<div className={requiredClass} style={{ height: "44px", fontSize: "16px", ...componentStyle }} data-flex="box:first">
					{
						isShowLabel ? <div className={labelClass} style={{ color: label_text_color }} data-flex='cross:center'>
							<div dangerouslySetInnerHTML={{ __html: label_left }}></div>
							{label}
						</div> : <div></div>
					}
					<div style={{ paddingRight: "0" }} className="am-list-line" data-flex="dir:left box:last">
						<div data-flex="main:right cross:center" onClick={() => {
							this.setState({
								open: true,
								inputValue: value
							})
						}}>
							{
								!isNull(value) ? <div>
									{showValue}
									{
										suffix_label && <span style={{ marginLeft: "5px" }}>{suffix_label}</span>
									}
								</div> : <div style={{ color: "rgb(187, 187, 187)" }}>请输入</div>
							}
							{
								hidden_arrow != 1 && <p style={{ width: "16px" }}><MIcon a='1' style={{ color: "rgb(187, 187, 187)" }} type="xiayiye" /></p>
							}
						</div>
						{
							hidden_arrow != 1 && hasError ? <div className="am-input-error-extra mi" onClick={(e) => {
								e.stopPropagation();
								MToast.info(errorMsg, 2, null, false)
							}} style={{ minWidth: "21px", width: "21px" }}
							/> : <div style={{ width: "8px" }}></div>
						}

					</div>
					<Modal
						visible={this.state.open}
						transparent
						maskClosable={false}
						title={label}
						footer={[
							{
								text: '取消', onPress: () => {
									this.setState({
										open: false
									})
								}
							},
							{
								text: '确认', onPress: () => {
									this.setState({
										open: false
									})
									this.changeValue(this.state.inputValue)
								}
							}
						]}
					>
						<div data-flex="main:center">
							<div data-flex style={{ height: "44px", lineHeight: "36px", border: "1px solid #ddd", borderRadius: "5px", margin: "15px 0" }}>
								<p style={{ fontSize: "24px", borderRight: "1px solid #ddd", width: "38px", textAlign: "center" }} onClick={() => {
									this.sub()
								}}>-</p>
								<input value={modalShowValue} style={{ textAlign: "center", width: "100px", border: "none" }}
									onFocus={() => {
										handleInputFocusBlur();
									}}
									onChange={(e) => {
										this.onChange(e.target.value);
									}} onBlur={(e) => {
										this.onBlur(e.target.value);
									}} disabled={isDisabled} readOnly={isReadonly} />
								<p style={{ fontSize: "24px", borderLeft: "1px solid #ddd", width: "38px", textAlign: "center" }} onClick={() => {
									this.add();
								}}>+</p>
							</div>
						</div>
					</Modal>
				</div>
				{tips && <p className="tipsStyle">{tips}</p>}
			</div>
		)
	}
}
